<template>
  <div>
    <el-table :data="tableData" border style="width: 100%; text-align: center">
      <el-table-column prop="cheweiId" label="ID" width="120" v-if="false">
      </el-table-column>
      <el-table-column prop="shengName" label="省" width="120">
      </el-table-column>
      <el-table-column prop="shiName" label="市" width="120">
      </el-table-column>
      <el-table-column prop="quName" label="区" width="120">
      </el-table-column>
      <el-table-column prop="cheweiAddress" label="详细地址" width="300">
      </el-table-column>
      
      <el-table-column prop="cheweiType" label="车位类型" width="120">
      </el-table-column>
      <el-table-column prop="pBlance" label="价格" width="120">
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row.cheweiId,scope.row.pBlance)" size="big" type="success" plain>预约</el-button>
          <el-button  size="big" type="warning" plain @click="start(scope.row.cheweiId)">Start</el-button>
          <el-button  size="big" type="danger" plain @click="end(scope.row.cheweiId)">End</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  mounted(){
    // 更新表单数据
    this.updateTable();
  },
  data() {
    return {
      tableData: [{cheweiAddress:"啥的"},],
      oId:"",
      flag:true,
      flag2:true,
      uId:"",
      // 价格
      pBlance:0,
    };
  },
  methods: {
    // 更新表单数据
    updateTable(){
      // 收集数据
      let msg=JSON.parse(sessionStorage.getItem("p_path"));
      // 发送请求
      this.$axios.post("chewei/findByArea",msg)
      // 处理响应
      .then(resp=>{
        let r=resp.data;
        if(r.code==200){
          this.$message.success("初始化成功");
          console.log(r.data);
          this.tableData=r.data;
          // 取出登陆者的uId
          this.uId=JSON.parse(sessionStorage.getItem("u")).uId;
          console.log(this.uId);
          return;
        }
         this.$message.error("初始化失败！");
      });
    },
    // 预约点击事件
    handleClick(cheweiId,pBlance) {
      if(!this.flag){
        alert("您有未完成的预约！请您结束预约。");
        return;
      }
      // 搜集参数
      let msg={
        cheweiId:cheweiId,
        uId:2
      };
      // 发送请求
      this.$axios.post("orders/add",msg)
      // 处理响应
      .then(resp=>{
        let r=resp.data;
        if(r.code==200){
          this.oId=r.data;
          this.pBlance=pBlance;
          alert("预约成功！请您十分钟后到达指定地点。");
          this.flag=false;
          return;
        }
        this.$message.error("预约失败！");
      });
    },
    // 开始点击事件
    start(cheweiId){
      if(this.oId==""){
        this.$message.error("请您先预约！");
        return;
      }
      if(!this.flag2){
        this.$message.error("存在正在进行的订单");
        return;
      }
      //收集参数
      let msg={
        oId:this.oId,
        uId:this.uId,
        cheweiId:cheweiId
      };
      // 发送请求
      this.$axios.post("orders/start",msg)
      // 处理响应
      .then(resp=>{
        let r=resp.data;
        if(r.code==200){
          this.$message.success("订单已经开始执行。。。");
          this.flag2=false;
          return;
        }
        this.$message.error("订单开始失败！");
      });
    },
    // 停止租车位事件
    end(cheweiId){
      if(this.flag){
        this.$message.error("请您先预约！");
        return;
      }
      if(this.flag2){
        this.$message.error("您未开始订单！");
        return;
      }
      //收集参数
      let msg={
        oId:this.oId,
        uId:this.uId,
        cheweiId:cheweiId
      }
      // 发送请求
      this.$axios.post("orders/end",msg)
      // 处理响应
      .then(resp=>{
        let r=resp.data;
        if(r.code==200){
          this.$message.success("订单已结束！");
          // 获取数据计算钱
          let usedTime=r.data.sTime;
          let money=r.data.num*this.pBlance;
          console.log(money);
          alert("您本次停车使用时间为:"+usedTime);
          alert("本次使用需支付："+money+"元");
          this.flag=true;
          this.flag2=true;
          return;
        }
        this.$message.error("订单结束异常！");
      });

    }
  },
};
</script>

<style>
</style>